<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex布局</title>
	<style>
		.box {
			width: 800px;
			height: 200px;
			background: yellow;
			display: flex;
			display: -webkit-flex; 
			/*webkit内核的浏览器，必须加上前缀*/
			/*1 flex-direction：row 从左向右  | row-reverse 从右向左 | column 从上向下 | column-reverse 从下向上;*/
		    /*2 flex-wrap： nowrap 一条线上排列不换行【默认】 | wrap 换行，第一行在上面 | wrap-reverse 换行，第一行在下面;*/
		    /*3 flex-flow ：<flex-direction> || <flex-wrap>;     flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/
			/*4 justify-content： flex-start 左对齐 | flex-end 右对齐 | center 居中 | space-between 两端对齐 | space-around 每个项目两侧的间隔相等 ;   定义子元素在x轴上的对齐方式*/
			/*5 align-items： flex-start 与纵轴上对齐 | flex-end 与纵轴下对齐 | center 纵轴上中点对其 | baseline 纵轴上与第一行文字的基线对齐 | stretch 如果项目未设置高度或设为auto，子元素高度将占满整个容器的高度。默认对齐方式;  定义子元素在Y轴上的对齐方式*/
			/*6 align-content：flex-start 与纵轴起点对齐 | flex-end 与纵轴终点对齐 | center 与纵轴中点对齐 | space-between 与纵轴两端对齐 | space-around | stretch;  定义多根轴线的对齐方式，如果只有一根轴，该属性不起作用*/
			align-content: space-between;
			align-items: flex-start;
            justify-content: flex-start;
		}
		.son {
			width: 100px;
			height: 150px;
			background: red;
			/*float: right;*/
			/*由于父元素设置flex，子元素的float属性将失效*/
		}
		img.top {
			/*由于父元素设置flex，子元素的vertical-align属性将失效*/
			vertical-align: text-bottom;
		}
		.son1 {
			width: 100px;
			height: 150px;
			background: green;
			/*float: right;*/
			/*order定义项目的排列顺序*/
			order:0;
			/*flex-grow定义项目的放大比例.默认为0。*/
			flex-grow: 3;
		}
		.son2 {
			width: 100px;
			height: 150px;
			background: blue;
			order:4;
			/*flex-shrink: 1;定义项目的缩小比例，默认为1*/
            flex-shrink: 1;
		}
		.son3 {
			width: 300px;
			/*height: 150px;*/
			background: skyblue;
			order:2;
			/*flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间 ,默认auto，即项目本来大小*/
            flex-basis: auto;
		}
		.son4 {
			width: 100px;
			/*height: 150px;*/
			background: purple;
			order:3;
            /*align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/
		}
		h3 {
			display: inline-flex;
		}
	</style>
</head>
<body>
	<div class="box">
		<!-- 任何一个容器都可以指定为flex布局,它的所有子元素会自动成为容器成员，称为flex项目 -->
		<div class="son">
			<!-- 注意！！父元素设置flex布局后，子元素的float ,clear,vertical-align属性都将失效 -->
			这是一幅<img class="top" border="0" src="0.jpg" widht="50px" height="50px"/>位于段落中的图像。
		</div>
		<div class="son1">
			111
		</div>
		<div class="son2">
			22
		</div>
		<div class="son3">
			33
		</div>
		<div class="son4">
			44
		</div>
	</div>

	<h3>
	    行内元素也可以使用flex布局哦
    </h3>
</body>
</html>